﻿<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="angular.js"></script>
    <script src="ui-bootstrap-tpls-0.12.1.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3 class="modal-title">I'm a modal!</h3>
            </div>
            <div class="modal-body">
                <ul>
                    <li ng-repeat="item in items">
                        <a ng-click="selected.item = item">{{ item }}</a>
                    </li>
                </ul>
                Selected: <b>{{ selected.item }}</b>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>

        <button class="btn btn-default" ng-click="open()">Open me!</button>
        <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
        <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
        <div ng-show="selected">Selection from a modal: {{ selected }}</div>
    </div>
    <script>
        angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
        .controller('ModalDemoCtrl', function ($scope, $modal, $log) {

            $scope.items = ['item1', 'item2', 'item3'];

            $scope.open = function (size) {

                var modalInstance = $modal.open({
                    templateUrl: 'myModalContent.html',
                    controller: 'ModalInstanceCtrl',
                    size: size,
                    resolve: {
                        items: function () {
                            return $scope.items;
                        }
                    }
                });

                modalInstance.result.then(function (selectedItem) {
                    $scope.selected = selectedItem;
                }, function () {
                    $log.info('Modal dismissed at: ' + new Date());
                });
            };
        })
        .controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

            $scope.items = items;
            $scope.selected = {
                item: $scope.items[0]
            };

            $scope.ok = function () {
                $modalInstance.close($scope.selected.item);
            };

            $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
            };
        });
    </script>
</body>
</html>
